<template>
    <el-row :gutter="20">
        <el-col :span="18" class="contract">
            <el-form ref="ruleFormRef" :model="ruleForm" >
                <el-descriptions border :column="2">
                    <el-descriptions-item :span=2 label="单位名称　　　　　"><div style="width: 100%" ><el-input v-model="ruleForm.name"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="纳税人识别号　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.tax_id"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="地址　　　　　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.address"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="电话　　　　　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="开户银行　　　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.bank"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="开户行号　　　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.bank_number"  /></div></el-descriptions-item>
                    <el-descriptions-item :span=2 label="银行账号　　　　　"><div style="width: 100%;" ><el-input v-model="ruleForm.bank_account"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.email"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.postal_code"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传公司营业执照　">
                        <el-button type="primary"  @click="onUploadFile('business_file')"> 上传 </el-button>
                        <el-button :type="ruleForm.b_business_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.business_file)"> 查看 </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="上传法人身份证　　">
                        <el-button type="primary"  @click="onUploadFile('idcard_file')"> 上传 </el-button>
                        <el-button :type="ruleForm.b_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.idcard_file)"> 查看 </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="企业法人　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.legal"  /></div></el-descriptions-item>
                    <el-descriptions-item label="企业法人联系电话　"><div style="width: 240px;" ><el-input v-model="ruleForm.legal_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="代理人　　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.agent"  /></div></el-descriptions-item>
                    <el-descriptions-item label="代理人联系电话　　"><div style="width: 240px;" ><el-input v-model="ruleForm.agent_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传委托代理授权书">
                        <el-button type="primary"  @click="onUploadFile('authorize_file')"> 上传 </el-button>
                        <el-button :type="ruleForm.b_authorize_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.authorize_file)"> 查看 </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="上传代理人身份证　">
                        <el-button type="primary"  @click="onUploadFile('agent_idcard_file')"> 上传 </el-button>
                        <el-button :type="ruleForm.b_agent_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.agent_idcard_file)"> 查看 </el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
        </el-col>
    </el-row>
        
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 提交 </el-button>
        <!-- <component :is="applyButton" model = "Supplier" :source = "source" type = "apply" :id = id :price="0" /> -->
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="uploadFile" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>

    <el-dialog v-model="isShowFile" title="文件" class="m0" width="80%" @close="onCloseFile" draggable>
        <component :is="showFile" :data="files"/>
    </el-dialog>

    <el-dialog v-model="isPrint" title="打印预览" width="900px">
        
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import { ElMessage, FormInstance } from 'element-plus';
import uploadFile from '@/components/uploadFile.vue'
import showFile from '@/components/showFile.vue'
import router from '../../../router';
// import applyButton from "@/components/applyButton.vue";
const isPrint = ref<boolean>(false)
const showUpload = ref<boolean>(false)
let uploadData:any = ref({prefix:'material/',type:''})
const isShowFile = ref<boolean>(false)
const files = ref('')

const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)
interface Project {
    id: number
    title: string
}
const Project = ref<Project>({id:0,title:''})
let data:any = sessionStorage.getItem('project')
Project.value = JSON.parse(data);
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

const ruleForm = ref<any>({})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/supplier',ruleForm.value)
            }else{
                ruleForm.value.material_id = id.value
                request = http.put('/supplier',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                router.push({ name: 'supplier'})
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/supplier/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
        }
    })
}

onMounted(()=>{
    getData()
})

const onUploadFile = (type:string) => {
    uploadData.value.type = type
    if(type == 'business_file'){
        uploadData.value.image = ruleForm.value.business_file
    }
    if(type == 'idcard_file'){
        uploadData.value.image = ruleForm.value.idcard_file
    }
    if(type == 'authorize_file'){
        uploadData.value.image = ruleForm.value.authorize_file
    }
    if(type == 'agent_idcard_file'){
        uploadData.value.image = ruleForm.value.agent_idcard_file
    }
    if(type == 'contract_canned'){
        uploadData.value.image = ruleForm.value.contract_canned
    }
    
    
    uploadData.value.id = id.value
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'business_file'){
        ruleForm.value.business_file = data
    }
    if(uploadData.value.type == 'idcard_file'){
        ruleForm.value.idcard_file = data
    }
    if(uploadData.value.type == 'authorize_file'){
        ruleForm.value.authorize_file = data
    }
    if(uploadData.value.type == 'agent_idcard_file'){
        ruleForm.value.agent_idcard_file = data
    }
    if(uploadData.value.type == 'contract_canned'){
        ruleForm.value.contract_canned = data
    }
    
    showUpload.value = false
}

const onShowFile = (file:string) => {
    if(!file){
        ElMessage.error('未上传文件');return
    }
    files.value = file
    isShowFile.value = true
}

const onCloseFile = () => {
    files.value = ''
}

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.b_ .el-input{width: 340px;}
</style>
